看灰白模式如何搅动移动互联网江湖

导语

本文通过分析PC互联网到移动互联网的差异，研究4月4日各大互联网App平台在灰白颜色动态换肤上的表现，进一步探讨移动App动态UI的技术实现方案及其架构，希望对行业内App产品UI设计有所帮助和启发。

前言

纵观中国过去20年的互联网发展历程，主要经历了从PC（桌面）互联网到移动互联网的两次互联网浪潮。2011年以前，用户接入互联网的主要途径是个人电脑（台式机和笔记本电脑）；2011年之后，随着智能手机硬件计算能力的进一步提升、3G网络在中国各大城市的进一步普及，越来越多的网民开始从个人电脑桌面软件转向手机移动App应用。

终端设备以及网络环境的巨大变化也带来了应用软件的变化。在这当中，Windows、Android以及iOS三大操作系统扮演着非常重要的角色，作为应用软件的设计开发者有必要了解PC操作系统和智能手机系统两者之间的差异。

首先，终端屏幕大小的不同带来UI（用户界面）设计的不同，既要考虑用户的操作习惯，也要考虑软件功耗；比如用户在手机上的操作手势比起Windows也有很大的变化，PC电脑主要以鼠标左键的单双击和右键操作为主，而手机软件中有长按、放大缩小等新的操作手法。

其次，Android/iOS两大智能操作系统本身的差异带来的软件开发的差异，同一款App应用产品通常需要两个不同方向的工程师开发应用，然后发布到对应的应用市场中进行分发推广。

最后，网络带宽的限制以及移动App在发布方面的门槛相比桌面软件有更多的约束；相比PC桌面软件，移动App主要通过Android应用市场以及苹果的应用市场作为发行渠道。

虽然手机终端应用有一些局限性，但其自身也有很多优势，比如便于携带、利用碎片时间进行学习、方便出行等多个方面。

实现效果对比分析

本文要讨论的移动App动态界面设计（动态换肤）主题也可以借鉴一下传统PC软件动态界面设计，两者实现基本原理大体是一致的。所谓动态界面设计，主要是指在客户端软件不发版本的情况下，在特定时期，通过服务端远程调整配置文件和UI资源并下发到客户端，从而来改变软件用户界面的表现形式以达到某种宣传目的。下面以清明期间4月4日哀悼日宣传活动来举例说明，其中最为典型的是各大互联网公司通过App平台来宣传无数为抗击新冠疫情默默付出的感人事迹。

1. 分析对象选取

本文从新闻资讯类、视频直播类、生活服务类、电商平台类App四大类中选取58App、手淘App、美团App、京东App、腾讯新闻App、抖音App、爱奇艺App等几款App作为分析对象，具体分类及App如下表所示：

App类别	代表App
新闻资讯类	腾讯新闻App、今日头条App
视频直播类	抖音App、爱奇艺App
生活服务类	58App、美团App
电商平台类	手淘App、京东App

2. 灰白模式适配效果评析

下面将从App灰白模式的启动界面、闪屏界面、首页界面以及综合效果等四个方向来举例说明。

2.1 启动界面评析

App启动分为冷启动和热启动，这里的启动界面指的是冷启动过程中的启动界面。冷启动过程展示启动界面，后台在做一系列系统相关的工作，比如给App创建进程、加载App依赖的系统库等。启动界面对应的是一张静态图片，不论是iOS还是Android，都不能通过Server端来控制启动界面图片，这张图片只能在App打包时内置。 

因此，在活动当天可以看到市面上99%的App启动界面都是彩色的，都不能变成灰白色。关于这一点，估计每个公司的技术人员都得向上面解释一番，不是不想做，是真的做不到。

但也有一个小惊喜的是在iOS平台上苹果给Dark（暗黑）模式提供了独立设置启动界面的能力（如下图展示的简书App的不同模式下的启动界面），不过从目前看这个功能绝对多数App都没有使用。但遗憾的是，苹果只给Light模式和Dark模式这两种模式提供对应的启动界面，没有对自定义的模式（比如清明灰白模式）提供独立设置的能力。关于自定义模式的扩展能力，也只有进一步向苹果交涉才有可能开放，这里不再赘述。

根据上面分析，我们可以看到各类App仍然有改进空间，详情参考下表：

App类别	代表App	启动界面适配
新闻资讯类	腾讯新闻App	需改进
今日头条App	需改进
视频直播类	抖音App	需改进
爱奇艺App	需改进
生活服务类	58App	需改进
美团App	需改进
电商平台类	手淘App	需改进
京东App	需改进

备注：上述的评析结果由于iOS/Android系统的限制，基本做不了什么处理。但是在iOS系统上如果针对暗黑模式适配了启动界面，黑色的背景显得庄重，也能在致敬清明活动中有一定的效果。

2.2 闪屏界面评析

闪屏界面基本上每一个App都具有这个功能，主要作为品牌广告相关内容展示，引导用户关注和快速进入对应的功能模块。从技术实现角度来说，闪屏界面理论上可以做成完整的动态化，界面元素通过Server来动态控制。但是在这次活动中，不少App在闪屏的底部品牌Logo区域没有做成动态化，或许当时在产品设计初期并没有考虑这一块的动态化配置，写死即可。不过从产品设计的可扩展性角度来说，程序员还是得多做一些未雨绸缪的事，在可扩展性和过度设计之间取得一个平衡。下图所示腾讯新闻的闪屏界面，是在众多App做的比较突出的一个。

从上面的分析我们可以得出下表所示的评析结果：

App类别	代表App	闪屏界面灰白适配
新闻资讯类	腾讯新闻App	优秀
今日头条App	良好
视频直播类	抖音App	良好
爱奇艺App	良好
生活服务类	58App	良好
美团App	良好
电商平台类	手淘App	良好
京东App	良好

备注：上述的评析结果是通过各种途径的用户反馈收集而来，有可能与真实情况有少许出入，评测结果不代表相应App技术或产品的好坏。

2.3 首页界面评析

首页界面是一个App的流量总入口，为保证绝对的稳定性和更好的用户体验，所采用的技术实现方式基本上是纯原生的Native技术，很少采用跨平台技术实现。那么问题来了，首页界面UI和交互那么复杂，基于纯Native技术的界面动态化总是会有漏网之鱼，下图所示的四个App的首页界面，除了腾讯新闻100%做到了完全灰白，其它App都或多或少有那么一些遗漏点不能动态支持。

由于首页界面构成比较复杂，下面将从页面头部、页面主体、页面底部三个方面进行评析。

2.3.1 页面头部

由于各App产品针对的目标用户群及所提供的功能服务有差异，各个App首页头部设计的思路都不一样，比如58App、京东App头部都有一个大的背景，58App将搜索放在页面主体部分，但京东将搜索放在了头部部分。头部页面构成元素的多少以及复杂程度并不会对此次灰白适配活动有本质的影响，最关键的影响是在技术实现过程中，容易将头部区域的功能模块写死。不过幸好在日常App运营过程中，有很多换肤需求，比如不通过节日呈现不同背景色。这类运营需求使得技术上对头部的界面动态化做了充足的准备，针对此次的灰白变肤的支持丝毫没有压力。

从上面的分析我们可以得出下表所示的评析结果： 

App类别	代表App	首页头部界面灰白适配
新闻资讯类	腾讯新闻App	优秀
今日头条App	优秀
视频直播类	抖音App	优秀
爱奇艺App	优秀
生活服务类	58App	优秀
美团App	优秀
电商平台类	手淘App	优秀
京东App	优秀

备注：上述的评析结果是通过各种途径的用户反馈收集而来，可能与真实情况有少许出入，评测结果不代表相应App技术或产品的好坏。

2.3.2 页面主体

用纯Native代码编写的首页主体部分，基本上做了组件化处理，即通过服务器下发组件信息，客户端根据获取到组件信息进行动态渲染。但不同App组件精细度差异比较明显，有的组件做的比较精细，有的比较粗。 

粗粒度的组件动态化能动态控制组件的展示、隐藏以及页面位置的移动。可以看到在活动当天，有的App因为组件内部的UI不能动态控制，索性就将这个组件下线了。 

细粒度的组件动态化能细化到组件内部的每一个文字大小、颜色，每一个图片的url。细粒度的组件动态化能很好适配灰白模式。但是在具体研发迭代过程中，总有那么一些组件没有做到彻底的动态化。因此，也就看到很多App在首页主体部分有一些文字和图标还保留了彩色，不能进行替换。这个真的不是产品技术有意留着这一块不改，是在当前状况下确实改不了。相信经过这次之后，产品技术会全面梳理一些不能动态控制的组件，以应对下一次可能换肤活动。

另外，在主体部分一般会有好几页数据，用户上拉加载能不断看到内容。只有少量App针对首页全部数据进行了灰白适配，笔者收集到的App也只有澎湃新闻、腾讯新闻等App进行了多页数据灰白适配或全部数据适配。其它App第一屏幕界面只有上半部分进行了处理，下半部分没有进行处理。这其中有当前版本技术上不能实现的原因，也有可以实现但并没有做处理的原因。 

从上面的分析我们可以得出下表所示的评析结果：

App类别	代表App	首页主体界面灰白适配
新闻资讯类	腾讯新闻App	优秀
今日头条App	优秀
视频直播类	抖音App	良好
爱奇艺App	良好
生活服务类	58App	良好
美团App	良好
电商平台类	手淘App	良好
京东App	良好

备注：上述的评析结果是通过各种途径的用户反馈收集而来，可能与真实情况有少许出入，评测结果不代表相应App技术或产品的好坏。

2.3.3 页面底部

页面底部主要指的是App底部Tab导航。底部每一个Tab由图标和文字构成，文字和图标会随着用户切换Tab呈现选中状态和非选中状态，选中状态会高亮显示。同头部和主体部分一样，底部Tab在日常App运营中，经常会改动Tab图标做节日运营活动，所以这个需求也使得市面上绝对多数App从技术上都具备动态改变能力。虽具备基本的动态改变能力，但也可以看出一些App的Tab在选中状态下的图标和文字颜色改变不了，看来还是没有做到彻底的动态化。 

另外页面底部一个绝大多数App支持的不好的地方就是Tab右上角的未读消息红点提示。猜测这个红点提示，产品技术当时无论如何也想不到有一天会让它变灰。如巴菲特做梦不会想到今年美股会4次熔断一样，产品技术不能预测到这个红点有变灰的需求也就不足为奇了。 

从上面的分析我们可以得出下表所示的评析结果：

App类别	代表App	首页底部界面灰白适配
新闻资讯类	腾讯新闻App	优秀
今日头条App	良好
视频直播类	抖音App	良好
爱奇艺App	良好
生活服务类	58App	良好
美团App	良好
电商平台类	手淘App	良好
京东App	良好

备注：上述的评析结果是通过各种途径的用户反馈收集而来，可能与真实情况有少许出入，评测结果不代表相应app技术或产品的好坏。

2.4 综合效果评析

从启动界面、闪屏界面、首页界面三个主体页面的评析，可以得出如下表综合效果： 

App类别	代表App	灰白适配综合效果
新闻资讯类	腾讯新闻App	优秀
今日头条App	良好
视频直播类	抖音App	良好
爱奇艺App	良好
生活服务类	58App	良好
美团App	良好
电商平台类	手淘App	良好
京东App	良好

备注：上述的评析结果是通过各种途径的用户反馈收集而来，可能与真实情况有少许出入，评测结果不代表相应app技术或产品的好坏。

从综合效果来看，新闻类的App在动态换肤方面是做的最好的，特别是腾讯新闻App。其它类别的App总或多或少有一些小的功能点不能很好处理。可以说本次哀悼日清明活动，是对各大互联网平台App界面动态化能力的一次临时突击检验。由于需要适配处理的界面是进入App的主路径，基本上都是纯原生Native代码编写，再加上App更新受应用商店审核影响，来不及通过发新版本来达到适配需求，所以只能依赖当前App所具备的远程控制能力进行临时特殊处理。相信本次活动之后，各大App也会对从启动界面到主界面的页面动态能力进行一个全面的梳理。正所谓吃一堑长多智，说的就是要能举一反三。

几种实现方式及其架构

上面针对哀悼日活动做了初步的App视觉体验和基本技术实现方式分析，接下来我们针对不同业务的产品需求，讨论一下动态换肤的几种实现方案及其架构，概括一下主要的产品需求有：

1. 深色模式（或暗黑模式）

2. 皮肤包

3. 特定节日运营活动界面需求（如哀悼日灰色模式、中秋节等）

1. 动态换肤核心思想

动态换肤的核心思想是：通过样式和主题（类似于网页设计中的样式表）实现页面结构与设计的细节分离，再通过切换主题实现换肤。如下面的客户端系统架构图：

在Android和iOS平台里，实现UI界面效果的方式有很多种，但最佳的方式是通过样式和主题，实现分离页面结构和设计的细节，如Android的分离方式：

实现切换主题，需要对所有的View做显示拦截。在Android 10之后版本及全部iOS版本，均能实现系统UI组件的拦截切换，但对于自定义的UI组件，需要单独适配。同时Github上已经开源了很多动态换肤库，通过自定义UI组件，使低版本也能实现主题切换。

2. 深色模式

通过切换主题适配深色模式的技术难度不大，但由于需要适配的页面很多，同时多个业务线并行开发，会导致适配工作量很大，最麻烦的是UI组件的不统一，在处理View的拦截时，需要处理的特例情况比较多。

3. 皮肤包

主要解决上述的主题及图片必须内置的问题，把主题和图片资源打包成皮肤包的形式，运行时下载并动态加载切换主题。如Android里使插件化的技术，通过AssetManager.addAssetPath(…)加载皮肤包里的样式及图片资源。当然其中还有很多技术细节需要解决，如保证皮肤包与主包之间的资源id一致。

4. 特定节日活动

下面以全国哀悼日灰白模式为例来说明实现方式，未来其他节日也可以参考借鉴。除了上述通过切换主题的方案外，主要还有两种技术手段：一种是通过服务端来动态下发配置来动态控制界面布局（类似HTML页面中的CSS样式控制）；另一种是在客户端本地通过调整RGB字体颜色配置以及透明度来达到目的。

5. 通过服务端动态控制

其页面样式配置流程如下：通过Server的接口数据，控制页面样式，如文字的Color和图片的Url。通过采取不同的技术手段，可以实现不同页面的配置程度。

1. 最简单的布局动态化：通过Server控制卡片的位置及内容的动态化；

2. 基于细粒度组件的布局动态化：如Tangram等框架，不仅通过Server控制卡片的位置及内容的动态化，还可以通过VirtualView实现卡片内容的动态化，但逻辑无法动态化；

3. 跨平台动态化：通过跨平台框架（Hybrid，ReactNative，Weex，小程序等），实现逻辑与UI的动态更新，Flutter框架的生成产物为机器码，受AppStore的审核要求，不支持除H5外的动态加载能力，暂时无法在iOS上使用Flutter的动态更新能力。其具体实现方式如下架构所示：

6. 本地修改颜色值和透明度

以灰白颜色为例子，客户端原生Native可以直接对图片像素点做处理，通过拦截所有图片显示过程，对图片像素点做灰白处理：

总结

致敬英烈，缅怀逝者！值得一提的是，在本次活动中，各大互联网公司并没有缺席，纷纷通过App平台、网站等多种媒体渠道进行宣传扩散，积极传播正能量。作为互联网从业者，有幸参与这次哀悼日的界面适配活动，虽然时间仓促，但我们很好的完成了App的适配工作，达到了预期的效果。相信经此一役之后，各大移动互联网App平台都会重新考虑如何更高效低成本的完成换肤目标以满足多样化的运营的需求。

参考文献

1. Android Q深色主题模式（暗黑模式）适配，孔校军，https://segmentfault.com/a/1190000021553504

2. “暗黑模式”之58 同城 iOS App深色模式适配实践，贾学文、蒋演，https://mp.weixin.qq.com/s/QlIqwha0dgN9rJbDU-Gg_g

作者介绍

1. 蔡澄科 / 技术总监，负责58同城平台、部落以及58同镇技术团队的管理工作；兼任58技术委员会宣传运营负责人

2.刘阳 / 58同城用户增长Android高级架构师，2011年加入58同城

3. 彭飞 / iOS架构师，负责无线技术部iOS组的管理工作

本期话题

此次哀悼日的灰白模式界面适配活动你觉得哪家App的表现和效果最好？请在留言区评论告诉我们，并阐述你的观点进行探讨，点赞数最高的Top3（按照评论的点赞数由高至低排列）留言用户将各获得50元京东购物卡奖励！快来各抒己见

END

Flutter在58的应用实践系列话题

  



 
58技术沙龙第五期

“58对外技术沙龙第5期——Flutter在58的应用实践系列话题” 已准备就绪。

点击次条专题内容查看活动详情，或直接扫描二维码进群，4月12日（本周日）晚7:00不见不散！

阅读推荐